<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑失物</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        body {
            overflow-x: hidden;
        }
        #sidebar {
            min-height: 100vh;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1000;
        }
        .main-content {
            margin-left: 0;
            transition: margin-left 0.3s;
            position: relative;
            z-index: 1;
        }
        @media (min-width: 768px) {
            .main-content {
                margin-left: 25%;
            }
        }
        @media (min-width: 992px) {
            .main-content {
                margin-left: 16.666667%;
            }
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边导航栏 -->
            <div th:replace="fragments/sidebar :: sidebar"></div>

            <!-- 主内容区域 -->
            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 main-content">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h2">编辑失物</h1>
                    <div class="btn-toolbar mb-2 mb-md-0">
                        <a th:href="@{/lost-item/list}" class="btn btn-sm btn-outline-secondary">
                            <i class="bi bi-arrow-left"></i> 返回列表
                        </a>
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        <form th:action="@{/lost-item/update}" method="post" enctype="multipart/form-data">
                            <input type="hidden" name="id" th:value="${lostItem.id}">
                            
                            <div class="row mb-3">
                                <label for="title" class="col-sm-2 col-form-label">物品名称</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="title" name="title" th:value="${lostItem.title}" required>
                                </div>
                            </div>
                            
                            <div class="row mb-3">
                                <label for="category" class="col-sm-2 col-form-label">分类</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="category" name="category" th:value="${lostItem.category}" required>
                                </div>
                            </div>
                            
                            <div class="row mb-3">
                                <label for="location" class="col-sm-2 col-form-label">丢失地点</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="location" name="location" th:value="${lostItem.location}" required>
                                </div>
                            </div>
                            
                            <div class="row mb-3">
                                <label for="description" class="col-sm-2 col-form-label">详细描述</label>
                                <div class="col-sm-10">
                                    <textarea class="form-control" id="description" name="description" rows="4" th:text="${lostItem.description}" required></textarea>
                                </div>
                            </div>
                            

                            
                            <div class="row mb-3">
                                <label for="imageFile" class="col-sm-2 col-form-label">物品图片</label>
                                <div class="col-sm-10">
                                    <!-- 当前图片预览 -->
                                    <div th:if="${lostItem.imageUrl != null and lostItem.imageUrl != ''}" class="mb-3">
                                        <p class="text-muted">当前图片：</p>
                                        <img th:src="${lostItem.imageUrl}" alt="物品图片" class="img-thumbnail" style="max-height: 200px;">
                                        <input type="hidden" name="imageUrl" th:value="${lostItem.imageUrl}">
                                    </div>
                                    
                                    <!-- 文件上传控件 -->
                                    <input type="file" class="form-control" id="imageFile" name="imageFile" accept="image/*">
                                    <div class="form-text">支持 JPG、PNG 等图片格式，最大 5MB。上传新图片将替换当前图片。</div>
                                </div>
                            </div>
                            
                            <div class="row mb-3">
                                <label class="col-sm-2 col-form-label">状态</label>
                                <div class="col-sm-10">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="status" id="status0" value="0" th:checked="${lostItem.status == 0}">
                                        <label class="form-check-label" for="status0">未认领</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="status" id="status1" value="1" th:checked="${lostItem.status == 1}">
                                        <label class="form-check-label" for="status1">已认领</label>
                                    </div>
                                </div>
                            </div>
                            

                            
                            <div class="row">
                                <div class="col-sm-10 offset-sm-2">
                                    <button type="submit" class="btn btn-primary">更新</button>
                                    <a th:href="@{/lost-item/list}" class="btn btn-secondary">取消</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>